docs: Testing docs #9164

LFDanLu · 2025-11-10T23:58:53Z

same content as #9029, I pulled it out of the docs release since it refers to test utils that haven't been released yet

✅ Pull Request Checklist:

Included link to corresponding React Spectrum GitHub Issue.
Added/updated unit tests and storybook for this change (for new code or code which already has tests).
Filled out test instructions.
Updated documentation (if it already exists for this component).
Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

RSP

…_table

…ack to the visual

…ro_docs

…to testing_docs

…ro_docs

…to testing_docs

snowystinger · 2025-11-11T00:01:12Z

packages/@react-aria/test-utils/src/index.ts

 export {installMouseEvent, installPointerEvent} from './testSetup';
 export {pointerMap} from './userEventMaps';
 export {User} from './user';
+export type {CheckboxGroupTester} from './checkboxgroup';


this won't have been released yet either, does that matter?

yeah this I'm not going to put into the docs deploy. But in the final release these new testers will be made available so I'll merge that in then

LFDanLu · 2025-11-11T00:13:46Z

This is DNM until the upcoming docs deploy is done

rspbot · 2025-11-18T18:46:52Z

Build successful! 🎉

rspbot · 2025-11-18T18:52:50Z

Build successful! 🎉

devongovett

Looks good. Some suggestions on how to make the content a little less wordy. If you take them, make sure to apply to other component pages (and s2) as well.

devongovett · 2025-11-21T19:03:06Z

packages/dev/s2-docs/pages/react-aria/testing.mdx

+userEvent.click(document.activeElement);
+```
+
+## Test setup and common gotchas


Suggested change

## Test setup and common gotchas

## Test setup

devongovett · 2025-11-21T19:07:26Z

packages/dev/s2-docs/pages/react-aria/testing.mdx

+If you are using fake timers in your test suite, be aware that you may need to advance your timers after various interactions. We have `requestAnimationFrame` calls in various underlying hooks that you will need to also handle by advancing your timers in the tests.
+This happens most prominently in our collection components after selection. In Jest, this can be handled by calling `act(() => jest.runAllTimers());` but you may require more precise control
+depending on the other time-sensitive behavior you are testing. Please see [Jest's timer docs](https://jestjs.io/docs/timer-mocks) or the equivalent docs of your test frameworks for more information on how to do so.
+It is also a good idea to run all timers to completion after each test case to avoid any left over transitions or timeouts that a component may have setup during its lifecycle.


This is quite long. Maybe we can shorten it up a bit?

Suggested change

If you are using fake timers in your test suite, be aware that you may need to advance your timers after various interactions. We have `requestAnimationFrame` calls in various underlying hooks that you will need to also handle by advancing your timers in the tests.

This happens most prominently in our collection components after selection. In Jest, this can be handled by calling `act(() => jest.runAllTimers());` but you may require more precise control

depending on the other time-sensitive behavior you are testing. Please see [Jest's timer docs](https://jestjs.io/docs/timer-mocks) or the equivalent docs of your test frameworks for more information on how to do so.

It is also a good idea to run all timers to completion after each test case to avoid any left over transitions or timeouts that a component may have setup during its lifecycle.

When using fake timers, you may need to advance timers after various interactions, e.g. after selection. In Jest, use `jest.runAllTimers()`. You should also run all timers after each test completes. See [Jest's timer docs](https://jestjs.io/docs/timer-mocks) or the equivalent docs of your test framework for more information.

devongovett · 2025-11-21T19:09:58Z

packages/dev/s2-docs/pages/react-aria/testing.mdx

+});
+```
+
+### Simulating user long press


Suggested change

### Simulating user long press

### Simulating long press

devongovett · 2025-11-21T19:13:00Z

packages/dev/s2-docs/pages/react-aria/testing.mdx

+Some components like Menu support long press operations. Unfortunately, the approach of using the userEvent library to simulate a press event and running timers to hit the
+long press internal timer threshold isn't sufficient due to `useLongPress`'s usage of `PointerEvent` and our own detection of `virtual` vs `mouse`/`touch` pointer types. Mock [PointerEvent](https://github.com/adobe/react-spectrum/blob/16ff0efac57eebeb1cd601ab376ce7c58a4e4efd/packages/dev/test-utils/src/events.ts#L70-L103)
+globally and use `fireEvent` from `@testing-library/react` to properly simulate these long press events in your tests.
+If you are using Jest, you can call our <TypeLink links={testUtilDocs.links} type={testUtilDocs.exports.installPointerEvent} /> utility to automatically set up and tear down this mock in your test.
+Additionally, if you are using fake timers and don't need to control the specific timings around the long press interaction, feel free to use our <TypeLink links={testUtilDocs.links} type={testUtilDocs.exports.triggerLongPress} /> utility as shown below.


Do we need all this explanation? Can we just tell people what to do?

Suggested change

Some components like Menu support long press operations. Unfortunately, the approach of using the userEvent library to simulate a press event and running timers to hit the

long press internal timer threshold isn't sufficient due to `useLongPress`'s usage of `PointerEvent` and our own detection of `virtual` vs `mouse`/`touch` pointer types. Mock [PointerEvent](https://github.com/adobe/react-spectrum/blob/16ff0efac57eebeb1cd601ab376ce7c58a4e4efd/packages/dev/test-utils/src/events.ts#L70-L103)

globally and use `fireEvent` from `@testing-library/react` to properly simulate these long press events in your tests.

If you are using Jest, you can call our <TypeLink links={testUtilDocs.links} type={testUtilDocs.exports.installPointerEvent} /> utility to automatically set up and tear down this mock in your test.

Additionally, if you are using fake timers and don't need to control the specific timings around the long press interaction, feel free to use our <TypeLink links={testUtilDocs.links} type={testUtilDocs.exports.triggerLongPress} /> utility as shown below.

To simulate a long press event in components like Menu, mock PointerEvent globally and use the `triggerLongPress` function from `@react-aria/test-utils`.

makes sense, I'll keep the link to our installPointerEvents and triggerLongPress just so people know those utils are available

actually I guess the example right after imports those so people can infer from that

devongovett · 2025-11-21T19:13:48Z

packages/dev/s2-docs/pages/react-aria/testing.mdx

+import {fireEvent} from '@testing-library/react';
+import {installPointerEvent, triggerLongPress} from '@react-aria/test-utils';
+installPointerEvent();
+
+// In test case
+let button = getByRole('button');
+
+// With fireEvent and specific timing control
+fireEvent.pointerDown(el, {pointerType: 'touch'});
+act(() => jest.advanceTimersByTime(800));
+fireEvent.up(el, {pointerType: 'touch'});
+
+// With triggerLongPress
+triggerLongPress(button);


Do we need the manual method? I think triggerLongPress takes an option to control the duration right?

Suggested change

import {fireEvent} from '@testing-library/react';

import {installPointerEvent, triggerLongPress} from '@react-aria/test-utils';

installPointerEvent();

// In test case

let button = getByRole('button');

// With fireEvent and specific timing control

fireEvent.pointerDown(el, {pointerType: 'touch'});

act(() => jest.advanceTimersByTime(800));

fireEvent.up(el, {pointerType: 'touch'});

// With triggerLongPress

triggerLongPress(button);

import {installPointerEvent, triggerLongPress} from '@react-aria/test-utils';

installPointerEvent();

// In test case

let button = getByRole('button');

triggerLongPress(button);

devongovett · 2025-11-21T19:27:46Z

packages/dev/s2-docs/pages/react-aria/CheckboxGroup/testing.mdx

+<ClassAPI links={testUtilDocs.links} class={testUtilDocs.exports.User} />
+<ClassAPI links={testUtilDocs.links} class={testUtilDocs.exports.CheckboxGroupTester} />


Suggested change

<ClassAPI links={testUtilDocs.links} class={testUtilDocs.exports.User} />

<ClassAPI links={testUtilDocs.links} class={testUtilDocs.exports.CheckboxGroupTester} />

### User

<ClassAPI links={testUtilDocs.links} class={testUtilDocs.exports.User} />

### CheckboxGroupTester

<ClassAPI links={testUtilDocs.links} class={testUtilDocs.exports.CheckboxGroupTester} />

also do we need to repeat the User API on each test page? People can also refer to it in the testing guide if needed.

thats true but I felt it would be easier to have the information on each page so people didn't have to switch back and forth or if they found these testing pages via the search first

OK. I do think we need the headings above the ClassAPIs. It's difficult to tell what the APIs are for on the rendered page, or that there's two different ones.

devongovett · 2025-11-21T19:28:58Z

packages/dev/s2-docs/pages/react-aria/CheckboxGroup/testing.mdx

+
+## Testing FAQ
+
+<PatternTestingFAQ patternName="checkbox group" />


Do we want this repeated on each page or added to the testing guide?

same reasoning as the above, figured having all the info available on each page would help with discoverability

devongovett · 2025-11-21T19:30:45Z

packages/dev/s2-docs/pages/react-aria/GridList/testing.mdx

+[Timers](../testing.html#timers)
+
+[Long press](../testing.html#simulating-user-long-press)


Suggested change

[Timers](../testing.html#timers)

[Long press](../testing.html#simulating-user-long-press)

* [Timers](../testing.html#timers)

* [Long press](../testing.html#simulating-user-long-press)

devongovett · 2025-11-21T19:32:05Z

packages/dev/s2-docs/pages/react-aria/GridList/testing.mdx

+GridList features long press interactions on its items depending on the item actions provided and if the user is interacting with the gridlist on
+a touch device. Please see the following sections in the general testing documentation for more information on how to handle these
+behaviors in your test suite.


Suggested change

GridList features long press interactions on its items depending on the item actions provided and if the user is interacting with the gridlist on

a touch device. Please see the following sections in the general testing documentation for more information on how to handle these

behaviors in your test suite.

GridList supports long press interactions on its items in certain configurations. See the following sections on how to handle these behaviors in your tests.

devongovett · 2025-11-21T19:33:29Z

packages/dev/s2-docs/pages/s2/Tabs/testing.mdx

+## General setup
+
+Tabs features automatic tab collapse behavior and may need specific mocks to test said behavior.
+TODO: update this with what mocks are required


still todo?

oh thanks for catching this, I think i'll actually remove this section since collapsing shouldn't really be tested by the user IMO, thats on us to test

rspbot · 2025-11-21T22:31:13Z

Build successful! 🎉

…esting_docs

rspbot · 2025-11-21T23:01:20Z

Build successful! 🎉

rspbot · 2025-11-21T23:01:22Z

## API Changes

@react-aria/test-utils

/@react-aria/test-utils:CheckboxGroupTester

+CheckboxGroupTester {
+  checkboxes: Array<HTMLElement>
+  checkboxgroup: HTMLElement
+  constructor: (CheckboxGroupTesterOpts) => void
+  findCheckbox: ({
+    checkboxIndexOrText: number | string
+}) => HTMLElement
+  selectedCheckboxes: Array<HTMLElement>
+  setInteractionType: (UserOpts['interactionType']) => void
+  toggleCheckbox: (TriggerCheckboxOptions) => Promise<void>
+}

/@react-aria/test-utils:ComboBoxTester

+ComboBoxTester {
+  close: () => Promise<void>
+  combobox: HTMLElement
+  constructor: (ComboBoxTesterOpts) => void
+  findOption: ({
+    optionIndexOrText: number | string
+}) => HTMLElement
+  focusedOption: HTMLElement | null
+  listbox: HTMLElement | null
+  open: (ComboBoxOpenOpts) => Promise<void>
+  options: ({
+    element?: HTMLElement
+}) => Array<HTMLElement>
+  sections: Array<HTMLElement>
+  selectOption: (ComboBoxSelectOpts) => Promise<void>
+  setInteractionType: (UserOpts['interactionType']) => void
+  trigger: HTMLElement
+}

/@react-aria/test-utils:DialogTester

+DialogTester {
+  close: () => Promise<void>
+  constructor: (DialogTesterOpts) => void
+  dialog: HTMLElement | null
+  open: (DialogOpenOpts) => Promise<void>
+  setInteractionType: (UserOpts['interactionType']) => void
+  trigger: HTMLElement
+}

/@react-aria/test-utils:GridListTester

+GridListTester {
+  cells: ({
+    element?: HTMLElement
+}) => Array<HTMLElement>
+  constructor: (GridListTesterOpts) => void
+  findRow: ({
+    rowIndexOrText: number | string
+}) => HTMLElement
+  gridlist: HTMLElement
+  rows: Array<HTMLElement>
+  selectedRows: Array<HTMLElement>
+  setInteractionType: (UserOpts['interactionType']) => void
+  toggleRowSelection: (GridListToggleRowOpts) => Promise<void>
+  triggerRowAction: (GridListRowActionOpts) => Promise<void>
+}

/@react-aria/test-utils:ListBoxTester

+ListBoxTester {
+  constructor: (ListBoxTesterOpts) => void
+  findOption: ({
+    optionIndexOrText: number | string
+}) => HTMLElement
+  listbox: HTMLElement
+  options: ({
+    element?: HTMLElement
+}) => Array<HTMLElement>
+  sections: Array<HTMLElement>
+  selectedOptions: Array<HTMLElement>
+  setInteractionType: (UserOpts['interactionType']) => void
+  toggleOptionSelection: (ListBoxToggleOptionOpts) => Promise<void>
+  triggerOptionAction: (ListBoxOptionActionOpts) => Promise<void>
+}

/@react-aria/test-utils:MenuTester

+MenuTester {
+  close: () => Promise<void>
+  constructor: (MenuTesterOpts) => void
+  findOption: ({
+    optionIndexOrText: number | string
+}) => HTMLElement
+  menu: HTMLElement | null
+  open: (MenuOpenOpts) => Promise<void>
+  openSubmenu: (MenuOpenSubmenuOpts) => Promise<MenuTester | null>
+  options: ({
+    element?: HTMLElement
+}) => Array<HTMLElement>
+  sections: Array<HTMLElement>
+  selectOption: (MenuSelectOpts) => Promise<void>
+  setInteractionType: (UserOpts['interactionType']) => void
+  submenuTriggers: Array<HTMLElement>
+  trigger: HTMLElement
+}

/@react-aria/test-utils:RadioGroupTester

+RadioGroupTester {
+  constructor: (RadioGroupTesterOpts) => void
+  findRadio: ({
+    radioIndexOrText: number | string
+}) => HTMLElement
+  radiogroup: HTMLElement
+  radios: Array<HTMLElement>
+  selectedRadio: HTMLElement | null
+  setInteractionType: (UserOpts['interactionType']) => void
+  triggerRadio: (TriggerRadioOptions) => Promise<void>
+}

/@react-aria/test-utils:SelectTester

+SelectTester {
+  close: () => Promise<void>
+  constructor: (SelectTesterOpts) => void
+  findOption: ({
+    optionIndexOrText: number | string
+}) => HTMLElement
+  listbox: HTMLElement | null
+  open: (SelectOpenOpts) => Promise<void>
+  options: ({
+    element?: HTMLElement
+}) => Array<HTMLElement>
+  sections: Array<HTMLElement>
+  selectOption: (SelectTriggerOptionOpts) => Promise<void>
+  setInteractionType: (UserOpts['interactionType']) => void
+  trigger: HTMLElement
+}

/@react-aria/test-utils:TableTester

+TableTester {
+  cells: ({
+    element?: HTMLElement
+}) => Array<HTMLElement>
+  columns: Array<HTMLElement>
+  constructor: (TableTesterOpts) => void
+  findCell: ({
+    text: string
+}) => HTMLElement
+  findRow: ({
+    rowIndexOrText: number | string
+}) => HTMLElement
+  rowGroups: Array<HTMLElement>
+  rowHeaders: Array<HTMLElement>
+  rows: Array<HTMLElement>
+  selectedRows: Array<HTMLElement>
+  setInteractionType: (UserOpts['interactionType']) => void
+  table: HTMLElement
+  toggleRowSelection: (TableToggleRowOpts) => Promise<void>
+  toggleSelectAll: ({
+    interactionType?: UserOpts['interactionType']
+}) => Promise<void>
+  toggleSort: (TableToggleSortOpts) => Promise<void>
+  triggerColumnHeaderAction: (TableColumnHeaderActionOpts) => Promise<void>
+  triggerRowAction: (TableRowActionOpts) => Promise<void>
+}

/@react-aria/test-utils:TabsTester

+TabsTester {
+  activeTabpanel: HTMLElement | null
+  constructor: (TabsTesterOpts) => void
+  findTab: ({
+    tabIndexOrText: number | string
+}) => HTMLElement
+  selectedTab: HTMLElement | null
+  setInteractionType: (UserOpts['interactionType']) => void
+  tablist: HTMLElement
+  tabpanels: Array<HTMLElement>
+  tabs: Array<HTMLElement>
+  triggerTab: (TriggerTabOptions) => Promise<void>
+}

/@react-aria/test-utils:TreeTester

+TreeTester {
+  cells: ({
+    element?: HTMLElement
+}) => Array<HTMLElement>
+  constructor: (TreeTesterOpts) => void
+  findRow: ({
+    rowIndexOrText: number | string
+}) => HTMLElement
+  rows: Array<HTMLElement>
+  selectedRows: Array<HTMLElement>
+  setInteractionType: (UserOpts['interactionType']) => void
+  toggleRowExpansion: (TreeToggleExpansionOpts) => Promise<void>
+  toggleRowSelection: (TreeToggleRowOpts) => Promise<void>
+  tree: HTMLElement
+  triggerRowAction: (TreeRowActionOpts) => Promise<void>
+}

@react-spectrum/test-utils

/@react-spectrum/test-utils:CheckboxGroupTester

+CheckboxGroupTester {
+  checkboxes: Array<HTMLElement>
+  checkboxgroup: HTMLElement
+  constructor: (CheckboxGroupTesterOpts) => void
+  findCheckbox: ({
+    checkboxIndexOrText: number | string
+}) => HTMLElement
+  selectedCheckboxes: Array<HTMLElement>
+  setInteractionType: (UserOpts['interactionType']) => void
+  toggleCheckbox: (TriggerCheckboxOptions) => Promise<void>
+}

/@react-spectrum/test-utils:ComboBoxTester

+ComboBoxTester {
+  close: () => Promise<void>
+  combobox: HTMLElement
+  constructor: (ComboBoxTesterOpts) => void
+  findOption: ({
+    optionIndexOrText: number | string
+}) => HTMLElement
+  focusedOption: HTMLElement | null
+  listbox: HTMLElement | null
+  open: (ComboBoxOpenOpts) => Promise<void>
+  options: ({
+    element?: HTMLElement
+}) => Array<HTMLElement>
+  sections: Array<HTMLElement>
+  selectOption: (ComboBoxSelectOpts) => Promise<void>
+  setInteractionType: (UserOpts['interactionType']) => void
+  trigger: HTMLElement
+}

/@react-spectrum/test-utils:DialogTester

+DialogTester {
+  close: () => Promise<void>
+  constructor: (DialogTesterOpts) => void
+  dialog: HTMLElement | null
+  open: (DialogOpenOpts) => Promise<void>
+  setInteractionType: (UserOpts['interactionType']) => void
+  trigger: HTMLElement
+}

/@react-spectrum/test-utils:GridListTester

+GridListTester {
+  cells: ({
+    element?: HTMLElement
+}) => Array<HTMLElement>
+  constructor: (GridListTesterOpts) => void
+  findRow: ({
+    rowIndexOrText: number | string
+}) => HTMLElement
+  gridlist: HTMLElement
+  rows: Array<HTMLElement>
+  selectedRows: Array<HTMLElement>
+  setInteractionType: (UserOpts['interactionType']) => void
+  toggleRowSelection: (GridListToggleRowOpts) => Promise<void>
+  triggerRowAction: (GridListRowActionOpts) => Promise<void>
+}

/@react-spectrum/test-utils:ListBoxTester

+ListBoxTester {
+  constructor: (ListBoxTesterOpts) => void
+  findOption: ({
+    optionIndexOrText: number | string
+}) => HTMLElement
+  listbox: HTMLElement
+  options: ({
+    element?: HTMLElement
+}) => Array<HTMLElement>
+  sections: Array<HTMLElement>
+  selectedOptions: Array<HTMLElement>
+  setInteractionType: (UserOpts['interactionType']) => void
+  toggleOptionSelection: (ListBoxToggleOptionOpts) => Promise<void>
+  triggerOptionAction: (ListBoxOptionActionOpts) => Promise<void>
+}

/@react-spectrum/test-utils:MenuTester

+MenuTester {
+  close: () => Promise<void>
+  constructor: (MenuTesterOpts) => void
+  findOption: ({
+    optionIndexOrText: number | string
+}) => HTMLElement
+  menu: HTMLElement | null
+  open: (MenuOpenOpts) => Promise<void>
+  openSubmenu: (MenuOpenSubmenuOpts) => Promise<MenuTester | null>
+  options: ({
+    element?: HTMLElement
+}) => Array<HTMLElement>
+  sections: Array<HTMLElement>
+  selectOption: (MenuSelectOpts) => Promise<void>
+  setInteractionType: (UserOpts['interactionType']) => void
+  submenuTriggers: Array<HTMLElement>
+  trigger: HTMLElement
+}

/@react-spectrum/test-utils:RadioGroupTester

+RadioGroupTester {
+  constructor: (RadioGroupTesterOpts) => void
+  findRadio: ({
+    radioIndexOrText: number | string
+}) => HTMLElement
+  radiogroup: HTMLElement
+  radios: Array<HTMLElement>
+  selectedRadio: HTMLElement | null
+  setInteractionType: (UserOpts['interactionType']) => void
+  triggerRadio: (TriggerRadioOptions) => Promise<void>
+}

/@react-spectrum/test-utils:SelectTester

+SelectTester {
+  close: () => Promise<void>
+  constructor: (SelectTesterOpts) => void
+  findOption: ({
+    optionIndexOrText: number | string
+}) => HTMLElement
+  listbox: HTMLElement | null
+  open: (SelectOpenOpts) => Promise<void>
+  options: ({
+    element?: HTMLElement
+}) => Array<HTMLElement>
+  sections: Array<HTMLElement>
+  selectOption: (SelectTriggerOptionOpts) => Promise<void>
+  setInteractionType: (UserOpts['interactionType']) => void
+  trigger: HTMLElement
+}

/@react-spectrum/test-utils:TableTester

+TableTester {
+  cells: ({
+    element?: HTMLElement
+}) => Array<HTMLElement>
+  columns: Array<HTMLElement>
+  constructor: (TableTesterOpts) => void
+  findCell: ({
+    text: string
+}) => HTMLElement
+  findRow: ({
+    rowIndexOrText: number | string
+}) => HTMLElement
+  rowGroups: Array<HTMLElement>
+  rowHeaders: Array<HTMLElement>
+  rows: Array<HTMLElement>
+  selectedRows: Array<HTMLElement>
+  setInteractionType: (UserOpts['interactionType']) => void
+  table: HTMLElement
+  toggleRowSelection: (TableToggleRowOpts) => Promise<void>
+  toggleSelectAll: ({
+    interactionType?: UserOpts['interactionType']
+}) => Promise<void>
+  toggleSort: (TableToggleSortOpts) => Promise<void>
+  triggerColumnHeaderAction: (TableColumnHeaderActionOpts) => Promise<void>
+  triggerRowAction: (TableRowActionOpts) => Promise<void>
+}

/@react-spectrum/test-utils:TabsTester

+TabsTester {
+  activeTabpanel: HTMLElement | null
+  constructor: (TabsTesterOpts) => void
+  findTab: ({
+    tabIndexOrText: number | string
+}) => HTMLElement
+  selectedTab: HTMLElement | null
+  setInteractionType: (UserOpts['interactionType']) => void
+  tablist: HTMLElement
+  tabpanels: Array<HTMLElement>
+  tabs: Array<HTMLElement>
+  triggerTab: (TriggerTabOptions) => Promise<void>
+}

/@react-spectrum/test-utils:TreeTester

+TreeTester {
+  cells: ({
+    element?: HTMLElement
+}) => Array<HTMLElement>
+  constructor: (TreeTesterOpts) => void
+  findRow: ({
+    rowIndexOrText: number | string
+}) => HTMLElement
+  rows: Array<HTMLElement>
+  selectedRows: Array<HTMLElement>
+  setInteractionType: (UserOpts['interactionType']) => void
+  toggleRowExpansion: (TreeToggleExpansionOpts) => Promise<void>
+  toggleRowSelection: (TreeToggleRowOpts) => Promise<void>
+  tree: HTMLElement
+  triggerRowAction: (TreeRowActionOpts) => Promise<void>
+}

LFDanLu added 30 commits October 23, 2025 11:48

add FAQ and other sections

edeaa2f

add section for creating custom components

8a1f97e

initial stab at extracting types from style macro

28eb788

testing sizing properties

457c59a

Merge branch 'main' of github.com:adobe/react-spectrum into reference…

a15c24f

…_table

revert export of theme object since it was breaking inference

819c076

adding more values

3b991ea

reorg

42b0406

add the rest of the properties and double check them

36f1a6f

add more type links

e2b29c9

add mdn links for common types and specific css properties

4c94cd0

add relative links so basecolors and various dimension strings link b…

83262ef

…ack to the visual

add descriptions to table and get rid of unessasary isRelative

5d2b172

add short hand and condition tables

980d3d6

add subpage for reference and advanced style macro section

59e9400

support subpage list under the ToC

a414886

forgot to move last bit of content

0b2751d

update FAQ, add mobile related pages, link from RAC styling

4ef4996

Merge branch 'main' of github.com:adobe/react-spectrum into style_mac…

b04b7af

…ro_docs

fix mobile styling

807beb0

initial react aria testing docs

68a66e0

pare down content for readability

432f702

adding S2 testing docs

78fb92b

add sample subpage content

620ebd7

add style for blockquote

6fdf671

add new test util docs to old website

c051a8c

add examples to new docs

159e76b

clean up old code, no more switcher

50c9e07

refactor test util content so it is in each page

5a10ff0

debug why subpage why failing

5b9fda5

LFDanLu added 9 commits November 3, 2025 16:04

make icons page lowercase and fix shorthands link

6bf1724

whoops forgot to make git track the capitalization rename

6e508f2

Merge branch 'style_macro_docs' of github.com:adobe/react-spectrum in…

73626ea

…to testing_docs

use isSubPage and update to detect parent link

e799a04

export only the type

f8ec2fb

addressing feedback from quarry team

4b38f98

Merge branch 'main' of github.com:adobe/react-spectrum into style_mac…

2e13868

…ro_docs

Merge branch 'style_macro_docs' of github.com:adobe/react-spectrum in…

6f69d9e

…to testing_docs

update subpage back button logic

cad6874

snowystinger reviewed Nov 11, 2025

View reviewed changes

LFDanLu changed the title ~~docs: Testing docs~~ docs: (DNM) Testing docs Nov 11, 2025

Base automatically changed from style_macro_docs to main November 11, 2025 01:27

LFDanLu added 3 commits November 18, 2025 10:33

Merge branch 'main' of github.com:adobe/react-spectrum into testing_docs

10d231d

add testing option back to mobile ToC

2189b24

fix bad merge

e2a12f3

LFDanLu changed the title ~~docs: (DNM) Testing docs~~ docs: Testing docs Nov 18, 2025

LFDanLu added the ready for review label Nov 18, 2025

devongovett previously approved these changes Nov 21, 2025

View reviewed changes

review comments

c1833f4

LFDanLu dismissed devongovett’s stale review via c1833f4 November 21, 2025 22:16

Merge branch 'main' into testing_docs

27bd54a

LFDanLu added 2 commits November 21, 2025 14:52

forgot to add separate headers

1bd0429

Merge branch 'testing_docs' of github.com:adobe/react-spectrum into t…

ec28c4a

…esting_docs

devongovett approved these changes Nov 21, 2025

View reviewed changes

		<ClassAPI links={testUtilDocs.links} class={testUtilDocs.exports.User} />
		<ClassAPI links={testUtilDocs.links} class={testUtilDocs.exports.CheckboxGroupTester} />


		## Testing FAQ

		<PatternTestingFAQ patternName="checkbox group" />

		[Timers](../testing.html#timers)

		[Long press](../testing.html#simulating-user-long-press)

docs: Testing docs #9164

Are you sure you want to change the base?

docs: Testing docs #9164

Conversation

LFDanLu commented Nov 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

LFDanLu commented Nov 11, 2025

Uh oh!

rspbot commented Nov 18, 2025

Uh oh!

rspbot commented Nov 18, 2025

Uh oh!

devongovett left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

LFDanLu Nov 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rspbot commented Nov 21, 2025

Uh oh!

rspbot commented Nov 21, 2025

Uh oh!

rspbot commented Nov 21, 2025

@react-aria/test-utils

/@react-aria/test-utils:CheckboxGroupTester

/@react-aria/test-utils:ComboBoxTester

/@react-aria/test-utils:DialogTester

/@react-aria/test-utils:GridListTester

/@react-aria/test-utils:ListBoxTester

/@react-aria/test-utils:MenuTester

/@react-aria/test-utils:RadioGroupTester

/@react-aria/test-utils:SelectTester

/@react-aria/test-utils:TableTester

/@react-aria/test-utils:TabsTester

/@react-aria/test-utils:TreeTester

@react-spectrum/test-utils

/@react-spectrum/test-utils:CheckboxGroupTester

/@react-spectrum/test-utils:ComboBoxTester

/@react-spectrum/test-utils:DialogTester

/@react-spectrum/test-utils:GridListTester

/@react-spectrum/test-utils:ListBoxTester

LFDanLu commented Nov 10, 2025 •

edited

Loading

LFDanLu Nov 21, 2025 •

edited

Loading